¿Cómo puedo extender correctamente un objeto JS?

En la primera forma, está reemplazando el prototipo por uno nuevo (sobrescribiendo lo que había antes). En la segunda forma, está agregando un nuevo miembro al prototipo (expandiéndolo así).
Hay otro método: una biblioteca que tiene un método de extensión o similar (que básicamente envuelve lo que estás haciendo en tu segundo formulario en un envoltorio agradable). Por ejemplo, en jQuery:
$ .extend (obj_name.prototype, {
newfoo: function () {alert ('hola # 3'); }
}
|
Otra opción sin jQuery:
var extender = función (destino, fuente)
{
para (propiedad var en la fuente)
{
if (destino [propiedad] && (typeof (destino [propiedad]) == 'objeto')
&& (destino [propiedad] .toString () == '[objeto Objeto]') && origen [propiedad])
extender (destino [propiedad], fuente [propiedad]);
más
destino [propiedad] = fuente [propiedad];
}
destino de regreso;
}
var a = {a: 'prueba'}; // original
var b = {newFoo: function () {alert ('hola # 3'); }}; // la adicion
extender (a, b); // extiéndelo
a.newFoo (); // llamar a la propiedad agregada
|
Esto es porque en la fila
obj_name.prototype = {
newfoo: function () {alert ('hola # 3'); }
}
crea un nuevo objeto prototipo, eliminando contenido privous. Es como si hubieras dicho
var a = {};
cuando extiendes un objeto como
obj_name.prototype.newfoo = function () {alert ('hola # 3'); }
simplemente agrega una nueva propiedad (newfoo) al árbol de objetos manteniendo intacto el contenido existente. Por eso funciona
HTH
Ivo Stoykov
|
Si está buscando una biblioteca simple y liviana que le brinde exactamente esto: OOP "hecho bien" en javascript, eche un vistazo a esto: https://github.com/haroldiedema/joii
Se proporcionan ejemplos de código fuente en el archivo Léame de la página de github, así como estos enlaces:
http://harold.info/projects/joii
http://haroldiedema.github.io/joii
Esta biblioteca básicamente le permite definir "clases" como tales:
var Persona = Clase (función () {
this.firstname = "John"
this.surname = "Smith"
this.role = "Desarrollador"
this.getInfo = function () {
return this.firstname + '' + this.surname + 'is' + this.role;
};
});
var OtraPersona = Clase ({extiende: Persona}, función () {
this.firstname = "Bob";
});
var p = new AnotherPerson ();
console.log (p.getInfo ());
// Bob Smith es desarrollador
Editar
Para tomar su código como ejemplo, pero transformado en código compatible con JOII, se vería exactamente así:
var obj_name = Class (function () {
this.foo = function () {alert ('hola!'); };
this.foo2 = function () {alert ('¡hola de nuevo!'); };
};
var obj_name2 = Class ({amplía: obj_name}, function () {
this.newfoo = function () {alert ('hola # 3'); };
});
var o = new obj_name2 ();
o.foo (); // ¡Hola!
o.newfoo (); // hola # 3
O utilícelo como una mezcla:
var o = nuevo obj_name ();
o.mixin (obj_name2);
o.newfoo (); // hola # 3
O al revés, usando un "rasgo".
// la opción "usa" básicamente copia el contenido del objeto dado al alcance de su "clase", resolviendo el problema de reutilización de código horizontal.
var obj_name = Class ({usa: [obj_name2], function () {
this.foo = function () {alert ('hola!'); };
this.foo2 = function () {alert ('¡hola de nuevo!'); };
});
var o = nuevo obj_name ();
o.newfoo (); // hola # 3
|
Tu respuesta
StackExchange.ifUsing ("editor", function () {
StackExchange.using ("editor externo", función () {
StackExchange.using ("fragmentos", función () {
StackExchange.snippets.init ();
});
});
}, "fragmentos de código");
StackExchange.ready (function () {
var channelOptions = {
etiquetas: "" .split (""),
id: "1"
};
initTagRenderer ("". split (""), "" .split (""), channelOptions);
StackExchange.using ("editor externo", función () {
// Debe activar el editor después de los fragmentos, si los fragmentos están habilitados
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using ("fragmentos", función () {
createEditor ();
});
}
else {
createEditor ();
}
});
function createEditor () {
StackExchange.prepareEditor ({
useStacksEditor: false,
heartbeatType: 'respuesta',
autoActivateHeartbeat: falso,
convertImagesToLinks: verdadero,
noModals: cierto,
showLowRepImageUploadWarning: true,
reputacionToPostImages: 10,
bindNavPrevention: verdadero,
sufijo: "",
imageUploader: {
brandingHtml: "Desarrollado por \ u003ca href = \" https: //imgur.com/ \ "\ u003e \ u003csvg class = \" svg-icon \ "width = \" 50 \ "height = \" 18 \ "viewBox = \ "0 0 50 18 \" fill = \ "none \" xmlns = \ "http: //www.w3.org/2000/svg \" \ u003e \ u003cpath d = \ "M46.1709 9.17788C46.1709 8.26454 46.2665 7.94324 47.1084 7.58816C47.4091 7.46349 47.7169 7.36433 48.0099 7.26993C48.9099 6.97997 49.672 6.73443 49.672 5.93063C49.672 5.22043 48.9832 4.61182 48.1414 4.61182C47.4335 4.61182 46.725645.70728 469.4335 4.61182 46.725645.70531 43.1481 6.59048V11.9512C43.1481 13.2535 43.6264 13.8962 44.6595 13.8962C45.6924 13.8962 46.1709 13.2535 46.1709 11.9512V9.17788Z \ "/ \ u003e \ u003cpath d = \" M32.492 10.1419C32.492 14.648.942348 41.5985 12.6954 41.5985 10.1419V6.59049C41.59855.28821 41.1394 4.66232 40.1061 4.66232C39.0732 4.66232 38.5948 5.28821 38.5948 6.59049V9.60062C38.5948 10.8521 38.2696 11.5455 37.0451 11.5455C35.8209 11.5455 35.4954 10.8521 35.4954 9.6006232C 35.4954 10.8521 35.4954 9.6006232 35.495.4903 .1419Z \ "/ \ u003e \ u003cpath fill-rule = \" evenodd \ "clip-rule = \" evenodd \ "d = \" M25.6622 17.6335C27.8049 17.6335 29.3739 16.9402 30.2537 15.6379C30.8468 14.7755 30.9615 13.5579 30.9615 11.9512V6.59049C30.9615 5.28821 30.4833 4.66231 29.4502 4.66231C28.9913 4.66231 28.4555 4.94978 28.1109 5.50789C27.499 4.86533 26.7335 4.56087 25.7005 4.56087C23.1369 4.56087 21.0134 6.57349 21.013.9C 12.6616C28.1109 12.7229 28.1161 12.7799 28.121 12.8346C28.1256 12.8854 28.1301 12.9342 28.1301 12.983C28.1301 14.4373 27.2502 15.2321 25.777 15.2321C24.8349 15.2321 24.1352 14.98.52 14.53661 24.1352 14.98.52 14.53661 37 14.5218C21.7977 14.5218 21.2429 15.0123 21.2429 15.6887C21.2429 16.7375 22.9072 17.6335 25.6622 17.6335ZM24.1317 9.27932C24.1317 7.94324 24.9928 7.09766 26.1024 7.09766C27.2119 7.097.943 10.0928.537 28.0918.537 24.1317 10.6491 24.1317 9.27932Z \ "/ \ u003e \ u003cpath d = \" M16.8045 11.9512C16.8045 13.2535 17.2637 13.8962 18.2965 13.8962C19.3298 13.8962 19.8079 13.2535 19.8079 11.9512V8.12928C 18.48.4079 4.629 4.628C19.8045.127 14.279 4.98375 13.3609 5.88013C12.653 5.05154 11.6581 4.62866 10.3573 4.62866C9.34336 4.62866 8.57809 4.89931 7.9466 5.5079C7.58314 4.9328 7.10506 4.66232 6.51203 4.66232C5.47873 4.66232 5.00066 6.51203 4.66232C5.47873 4.66232 5.00066 5.288120 5.0007.2566 13.0007.896 13.0007802 8.0232 13.2535 8.0232 11.9512V8.90741C8.0232 7.58817 8.44431 6.91179 9.53458 6.91179C10.5104 6.91179 10.893 7.58817 10.893 8.94108V11.9512C10.893 13.2535 11.3711 13.8962 12.4044 13.896 2C13.4375 13.8962 13.9157 13.2535 13.9157 11.9512V8.90741C13.9157 7.58817 14.3365 6.91179 15.4269 6.91179C16.4027 6.91179 16.8045 7.58817 16.8045 8.94108V11.9512Z "/" / \ u003e \ u003cpath316.316 "/ 6,566 M \ u003e \ u003c316.316" / 4,649 M = 2,888 1.82471 4.66232C0.791758 4.66232 0.313354 5.28821 0.313354 6.59049V11.9512C0.313354 13.2535 0.791758 13.8962 1.82471 13.8962C2.85798 13.8962 3.31675 13.2535 3.31675 11.9512V6.59049Z \ "/ \ u003e \ u001.84" M12.87 0 1.1159 0 1.98861C0 2.87869 0.822846 3.57676 1.87209 3.57676C2.90056 3.57676 3.7234 2.87869 3.7234 1.98861C3.7234 1.1159 2.90056 0.400291 1.87209 0.400291Z \ "fill = \" # 1BB76E \ "/ \ u003eg \ u003c / \ u003e ",
contentPolicyHtml: "Contribuciones de usuario con licencia bajo \ u003ca href = \" https: //stackoverflow.com/help/licensing \ "\ u003ecc by-sa \ u003c / a \ u003e \ u003ca href = \" https://stackoverflow.com / legal / content-policy \ "\ u003e (política de contenido) \ u003c / a \ u003e",
allowUrls: verdadero
},
onDemand: verdadero,
discardSelector: ".discard-answer"
, inmediatamenteShowMarkdownHelp: true, enableTables: true, enableSnippets: true
});
}
});
¡Gracias por contribuir con una respuesta a Stack Overflow!
Asegúrese de responder la pregunta. ¡Proporcione detalles y comparta su investigación!
Pero evita ...
Pedir ayuda, aclaraciones o responder a otras respuestas.
Hacer declaraciones basadas en opiniones; respóndelos con referencias o experiencia personal.
Para obtener más información, consulte nuestros consejos sobre cómo escribir buenas respuestas.
Borrador guardado
Borrador descartado
Regístrate o inicia sesión
StackExchange.ready (function () {
StackExchange.helpers.onClickDraftSave ('# login-link');
});
Regístrese con Google
Registrarse usando Facebook
Regístrese con correo electrónico y contraseña
Enviar
Publicar como invitado
Nombre
Email
Requerido, pero nunca mostrado
StackExchange.ready (
function () {
StackExchange.openid.initPostLogin ('. New-post-login', 'https% 3a% 2f% 2fstackoverflow.com% 2fquestions% 2f5975408% 2fhow-can-i-extend-adecuadamente-a-js-object% 23new-answer' , 'question_page');
}
);
Publicar como invitado
Nombre
Email
Requerido, pero nunca mostrado
Publica tu respuesta
Descarte
Al hacer clic en "Publicar su respuesta", acepta nuestros términos de servicio, política de privacidad y política de cookies.
No es la respuesta que estás buscando? Explore otras preguntas etiquetadas javascript javascript-objects o haga su propia pregunta.